<!-- home -->
<template>
  <div class="index-container">
    <van-nav-bar title="资讯详情" left-arrow @click-left="onClickLeft" ref="nav" />
    <div class="index-container"  v-bind:style="{ minHeight: `calc(100vh -  ${navBarHeight}px)` }">
      <div class="warpper"  v-bind:style="{ marginTop: `${navBarHeight}px` }">
        <div class="title">{{info.title}}</div>
        <div class="tit-tip">
          <span>阅读：{{info.reads}}</span>
          <span class="span1">日期：{{info.created_at}}</span>
        </div>
        <div class="cont" v-html="info.content"> </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getArticleRead } from '@/api/user.js'
export default {
  name: 'NewDetails',
  data() {
    return {
      navBarHeight: 0,
      id: '',
      info: {}
    }
  },

  computed: {
    ...mapGetters(['tabBarHeight'])
  },

  mounted() {
    this.navBarHeight = this.$refs.nav.$el.offsetHeight // 获取组件元素高度
  },
  created() {
    this.id = this.$route.query.id
    this.getDetails()
  },
  methods: {
    // 获取资讯详情
    getDetails() {
      const param = {
        id: this.id
      }
      getArticleRead(param).then((res) => {
        if (res.code === 200) {
          const datas = res.data
          this.info = datas
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  background: #fff;

  .warpper {
    padding: 15px;

    .title {
      font-size: 18px;
      color: #333;
    }

    .tit-tip {
      font-size: 11px;
      color: #808080;
      margin-top: 8px;
      margin-bottom: 21px;

      .span1 {
        margin-left: 40px;
      }
    }

    .cont {
      font-size: 14px;
      color: #333;
      line-height: 1.3;
      text-align: justify;
    }
  }
}
</style>
